<template>
    <div class="me">
        <div class='moduleHead'>
            <router-link v-if="$store.state.user.userInfo.status.isGuest == 1" :to="{ name: 'upgrade' }">
                <span class="icon_gold"></span>
            </router-link>
            <span> {{language.myProfile_title}} </span>
            <router-link :to="{ name: 'setting' }">
                <span class="icon_setting"></span>
            </router-link>
        </div>
        <div class="body" ref="divScrollListen">
            <div class="me_head">
                <div class="me_head_bg"></div>
                <div class="portrait">
                    <label @click="mainImgClick" class='mainImg' :class="getGenderBgClass(userInfo.account.gender)">
                        <div class="img">
                            <lazyImg v-if="userInfo.pictures.length > 0" :src="userInfo.pictures[0].picture"></lazyImg>
                        </div>
                    </label>
                </div>
                <div class="line_icon_box">
                    <span v-if="userInfo.status.isGuest == 0" class="icon_gold"></span>
                    <span v-if="userInfo.status.photo_verify == 1" class="icon_verifyProfile"></span>
                </div>
                <div class="name">
                    <span>{{userInfo.account.username}}</span>
                </div>
                <div class="city">
                    {{baseInfo}}
                    <router-link :to="{ name: 'editProfile' }">
                        <span url="editProfile" class="profileEdit"></span>
                    </router-link>
                </div>
                <div v-if="$store.state.user.userInfo.status.isGuest == 1" class="upgrade_box">
                    <router-link :to="{ name: 'upgrade' }">
                        <button class="upgrade">{{language.unify_upgrade}}</button>
                    </router-link>
                </div>
                <div v-if="userInfo.account.hidden" class="profile_state main_color">
                    <span @click="openProfileState">Unhide your profile</span>
                </div>
            </div>
            <div class="photoArea">
                <dl>
                    <router-link :to="{ name: 'uploadPhoto',query: { type: 'public'}}">
                        <dt class="main_border"></dt>
                    </router-link>
                    <div v-if="publicPhotoList.length > 0">
                        <router-link :to="{ name: 'publicAlbum' }">
                            <dd v-for="(item,index) in publicPhotoList" :key="item.item_id">
                                <div class="img">
                                    <lazyImg :src="item.picture"></lazyImg>
                                </div>
                            </dd>
                            <dd class="totalInfo">
                                <div>
                                    <strong>{{userInfo.pictures.length}}</strong>
                                    <span v-html="userInfo.pictures.length > 1 ? language.myProfile_publicPhotos : language.myProfile_publicPhoto"></span>
                                </div>
                            </dd>
                        </router-link>
                    </div>
                    <div v-else>
                        <router-link :to="{ name: 'uploadPhoto',query: { type: 'public'}}">
                            <div class="noPhotoMsg main_color">
                                <div>
                                    <strong>{{language.myProfile_public}}</strong>
                                    <br>{{language.myProfile_noPhotoTip}}
                                </div>
                            </div>
                        </router-link>
                    </div>
                </dl>
                <router-link :to="{ name: 'requestedMyPhoto' }">
                    <div class="notice">
                        {{language.myProfile_requestTip}}
                        <div class="nums" v-if="stateNums.requestPhoto">{{stateNums.requestPhoto}}</div>
                        <div class="arrow"></div>
                    </div>
                </router-link>
            </div>
            <div class="photoArea">
                <dl>
                    <router-link :to="{ name: 'uploadPhoto',query: { type: 'private'}}">
                        <dt class="main_border"></dt>
                    </router-link>
                    <div v-if="privatePhotoList.length > 0">
                        <router-link :to="{ name: 'privateAlbum' }">
                            <dd v-for="(item,index) in privatePhotoList" :key="item.item_id">
                                <div class="img">
                                    <lazyImg :src="item.picture"></lazyImg>
                                </div>
                            </dd>
                            <dd class="totalInfo">
                                <div>
                                    <strong>{{userInfo.private_pictures.length}}</strong>
                                    <span v-html="userInfo.private_pictures.length > 1 ? language.myProfile_privatePhotos : language.myProfile_privatePhoto"></span>
                                </div>
                            </dd>
                        </router-link>
                    </div>
                    <div v-else>
                        <router-link :to="{ name: 'uploadPhoto',query: { type: 'private'}}">
                            <div class="noPhotoMsg main_color">
                                <div>
                                    <strong>{{language.myProfile_private}}</strong>
                                    <br>{{language.myProfile_noPhotoTip}}
                                </div>
                            </div>
                        </router-link>
                    </div>
                </dl>
                <router-link :to="{ name: 'whoHasAccess' }">
                    <div class="notice">
                        {{language.myProfile_hasRequestTip}}
                        <div class="arrow"></div>
                    </div>
                </router-link>
            </div>
            <div class="aboutArea">
                <!-- <div class="aboutTitle">{{language.unify_about}}</div> -->
                <ul class="aboutContent">
                    <li>
                        <div class="title">
                            {{language.unify_headline}}
                            <router-link :to="{ name: 'editHeadline' }">
                                <div class="profileEdit"></div>
                            </router-link>
                        </div>
                        <div class="dec" v-html="aboutData.headline">
                        </div>
                    </li>
                    <li>
                        <div class="title">
                            {{language.unify_aboutMe}}
                            <router-link :to="{ name: 'editAboutme' }">
                                <div class="profileEdit"></div>
                            </router-link>
                        </div>
                        <div class="dec" v-html="aboutData.aboutMe">
                        </div>
                    </li>
                    <li>
                        <div class="title">
                            {{language.unify_aboutMyMatch}}
                            <router-link :to="{ name: 'editAboutMyMatch' }">
                                <div class="profileEdit"></div>
                            </router-link>
                        </div>
                        <div class="dec" v-html="aboutData.aboutMyMatch">
                        </div>
                    </li>
                    <li>
                        <div class="title">
                            {{language.unify_firstidea}}
                            <router-link :to="{ name: 'editAboutMyFirstDateIdea' }">
                                <div class="profileEdit"></div>
                            </router-link>
                        </div>
                        <div class="dec" v-html="aboutData.aboutFirstIdea">
                        </div>
                    </li>
                    <li>
                        <div class="title">
                            {{language.unify_relationshipStatus}}
                            <router-link :to="{ name: 'editAboutRelationshipStatus' }">
                                <div class="profileEdit"></div>
                            </router-link>
                        </div>
                        <div class="dec">
                            {{aboutData.aboutRelationshipStatus}}
                        </div>
                    </li>
                </ul>
            </div>
            <div class="detailArea">
                <div class="detailTitle">
                    {{language.unify_detail}}
                    <router-link :to="{ name: 'editProfileDetail' }">
                        <div class="profileEdit"></div>
                    </router-link>
                </div>
                <div v-if="detailData.livingWith.length > 0" class="infoBox profileDetailIco1">
                    {{ detailData.livingWith }}
                </div>
                <div v-if="detailData.appearance.length > 0" class="infoBox profileDetailIco2">
                    {{ detailData.appearance }}
                </div>
                <div v-if="detailData.background.length > 0" class="infoBox profileDetailIco3">
                    {{ detailData.background }}
                </div>
                <div v-if="detailData.lifestyle.length > 0" class="infoBox profileDetailIco4">
                    {{ detailData.lifestyle }}
                </div>
            </div>
            <div class="aboutArea">
                <ul class="aboutContent">
                    <li>
                        <div class="title">
                            {{language.unify_lookingFor}}
                            <router-link :to="{ name: 'editAboutLookfor' }">
                                <div class="profileEdit"></div>
                            </router-link>
                        </div>
                        <div class="dec">
                            {{aboutData.aboutLookingFor}}
                        </div>
                    </li>
                    <li @click="toVerifyProfile" v-if="!parseInt(userInfo.status.photo_verify)" class="certification">
                        <label> Verify photo</label>
                        <span class="icon_verifyProfile"></span>
                    </li>
                </ul>
            </div>
        </div>
        <navBottom></navBottom>
        <publicDialog :props="dialogData"></publicDialog>
        <loading :props="{type:'page' ,show:loadingAjax}"></loading>
    </div>
</template>
<script>
import globalMixin from '../common/globalMixin'
import navBottom from './NavBottom'
import lazyImg from './LazyImg'
import storeDataPartMixin from '../common/storeDataPartMixin'
import userProfilePartMixin from '../common/userProfilePartMixin'

import publicDialog from './PublicDialog'
import loading from './Loading'

//import Tween from 'tween'
export default {

    name: 'me',

    components: {
        navBottom,
        publicDialog,
        lazyImg,
        loading
    },

    mixins: [storeDataPartMixin, userProfilePartMixin, globalMixin],

    data: function() {
        return {
            stateNums: {
                requestPhoto: 0,
            },
            loadingAjax: false,
            dialogData: {},
        }
    },

    created() {
        //console.log('me', 'created', this.$store.state.user.userInfo);
    },

    activated() {
        this.stateNums = this.getNums();
    },

    updated() {
        //console.log('update');
    },

    computed: {

        publicPhotoList() {
            let newarr = [],
                arr = this.userInfo.pictures;
            for (var i = 0; i < arr.length; i++) {
                if (i < 2) {
                    newarr[i] = arr[i];
                }
            }
            return newarr;
        },

        whosRequesteMyPhotoNewNum() {
            return this.userInfo.photo_new_request_count;
        },

        publicPhotoStatus() {
            let arr = this.getPhotoStatus(this.userInfo.pictures);
            return this.getPhotoLang(arr);
        },

        privatePhotoList() {
            let newarr = [],
                arr = this.userInfo.private_pictures;
            for (var i = 0; i < arr.length; i++) {
                if (i < 2) {
                    newarr[i] = arr[i];
                }
            }
            return newarr;
        },

        privatePhotoStatus() {
            let arr = this.getPhotoStatus(this.userInfo.private_pictures);
            return this.getPhotoLang(arr);
        },

        aboutData() {
            let userData = this.userInfo,
                aboutData = {};
            aboutData.headline = userData.about.headline.length > 0 ? Unit.HTMLAllbrCode(userData.about.headline) : this.language.unify_pleaseAskMe;
            aboutData.aboutMe = userData.about.about_me.length > 0 ? Unit.HTMLAllbrCode(userData.about.about_me) : this.language.unify_pleaseAskMe;
            aboutData.aboutMyMatch = userData.about.about_my_match.length > 0 ? Unit.HTMLAllbrCode(userData.about.about_my_match) : this.language.unify_pleaseAskMe;
            aboutData.aboutFirstIdea = userData.about.firstidea.length > 0 ? Unit.HTMLAllbrCode(userData.about.firstidea) : this.language.unify_pleaseAskMe;
            aboutData.aboutRelationshipStatus = this.getSelectLable('ms_marital', userData.about.relationship_status);
            aboutData.aboutLookingFor = this.getLocalStorageMultipleSelectLable('ms_gender', userData.match.match_gender, ', ') + ', ages ' + userData.match.match_age_min + ' - ' + userData.match.match_age_max + ', for ' + this.getLocalStorageMultipleSelectLable('ms_relation', userData.about.looking_for, ', ');

            return aboutData;
        },

        getDetailData() {
            let userData = this.userInfo,
                detailData = {
                    livingWith: '',
                    appearance: '',
                    background: '',
                    lifestyle: '',
                };

            //appearance star
            detailData.appearance += this.userProfilePartMixin_height(userData);
            detailData.appearance += this.userProfilePartMixin_bodyType(userData);
            detailData.appearance += this.userProfilePartMixin_eyesColor(userData);
            detailData.appearance += this.userProfilePartMixin_hairColor(userData);
            //appearance end

            //background star
            detailData.background += this.userProfilePartMixin_ethnicity(userData);
            detailData.background += this.userProfilePartMixin_religion(userData);
            detailData.background += this.userProfilePartMixin_education(userData);
            detailData.background += this.userProfilePartMixin_language(userData);
            detailData.background += this.userProfilePartMixin_political(userData);
            //appearance end

            //lifestyle  star
            detailData.lifestyle += this.userProfilePartMixin_occupation(userData);
            detailData.lifestyle += this.userProfilePartMixin_income(userData);
            detailData.lifestyle += this.userProfilePartMixin_drinking(userData);
            detailData.lifestyle += this.userProfilePartMixin_smoking(userData);
            detailData.lifestyle += this.userProfilePartMixin_haveChildren(userData);
            detailData.lifestyle += this.userProfilePartMixin_wantChildren(userData);
            detailData.lifestyle += this.userProfilePartMixin_havePets(userData);
            //lifestyle end

            return detailData;
        },

        detailData() {

            let detailData = this.getDetailData;

            if (detailData.appearance.length > 3) {
                detailData.appearance = detailData.appearance.substring(0, detailData.appearance.length - 2);
            }

            if (detailData.background.length > 3) {
                detailData.background = detailData.background.substring(0, detailData.background.length - 2);
            }

            if (detailData.lifestyle.length > 3) {
                detailData.lifestyle = detailData.lifestyle.substring(0, detailData.lifestyle.length - 2);
            }

            return detailData;
        },

        userInfo() {
            // this.$store.state.user.userInfo.status.photo_verify =1;
            return this.$store.state.user.userInfo;
        },

        gender() {
            return this.$store.getters.userGenderValue;
        },

        baseInfo() {
            return this.formatUserLocation({
                age: this.userInfo.account.age,
                gender: this.$store.getters.userGenderValue,
                city: this.userInfo.account.city,
                state: this.userInfo.account.state_name,
                country: this.userInfo.account.country_name,
            });
        },
    },

    methods: {

        getNums() {
            let stateObj = this.$store.state.base.siteNumState,
                obj = {
                    'requestPhoto': (typeof(stateObj) != 'undefined' && typeof(stateObj.request_photo_count) != 'undefined') ? this.judgeNum(stateObj.request_photo_count.new_count || 0) : 0,
                };
            return obj;
        },

        mainImgClick() {
            if (this.userInfo.pictures.length > 0) {
                this.$router.push({
                    name: 'publicAlbum'
                });
            } else {
                this.$router.push({
                    name: 'uploadPhoto',
                    query: { type: 'public' }
                });
            }
        },

        openProfileState() {
            let obj = {},
                tthis = this;
            obj.data = {
                hide: 0
            };
            obj.callback = function() {};
            obj.complete = function() {
                tthis.loadingAjax = false;
            };
            this.loadingAjax = true;
            this.$store.dispatch('user_updateProfileStatus', obj);
        },

        toVerifyProfile: function() {
            var tthis = this,
                userInfo = tthis.$store.state.user.userInfo;
            if (parseInt(userInfo.status.photo_verify) == 1) return;
            if (userInfo.pictures.length == 0) {
                tthis.dialogData = {
                    position: 'middle',
                    type: 'confirm',
                    content: {
                        title: '',
                        info: tthis.language.myProfile_uploadNote,
                    },
                    callback: function() {
                        tthis.$router.push({
                            name: 'uploadPhoto',
                            query: {
                                type: 'public'
                            }
                        })
                    },
                }
            } else {
                tthis.$router.push({
                    name: 'verifyProfile'
                })
            }
        },

        switchTab: function(tabName) {
            this.currentTab = tabName;
        },

        getPhotoStatus: function(obj) {
            var complete = 0,
                pending = 0;
            for (var i in obj) {
                if (parseInt(obj[i].active) == 1) {} else {
                    pending++;
                }
                complete++;
            }
            return [complete, pending];
        },

        getPhotoLang: function(arr) {
            let str = '(';
            if (arr[0] == 1) {
                str = str + arr[0] + " " + this.language.unify_phtoto;
            } else {
                str = str + arr[0] + " " + this.language.unify_phtotos;
            }
            if (arr[1] > 0) {
                str = str + " / " + arr[1] + " " + this.language.unify_pending;
            }
            str = str + ')';
            return str;
        },

    },

}

</script>
<style>
.me {
    padding: 44px 0 51px 0;
}

.me .moduleHead {
    border-bottom: 0;
}

.me::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 50%;
    background: #282629;
}

.me .body>div {
    background: #fff;
}

.me .me_head .me_head_bg {
    position: absolute;
    left: 0;
    top: 0;
    background: #282629;
    width: 100%;
    height: 68px;
}

.me .me_head .profile_state {
    padding-top: 10px;
    font-size: 15px;
}

.me .me_head .profile_state span {
    padding-left: 28px;
    display: inline-block;
    background-image: url(../assets/icon_profile.png);
    background-repeat: no-repeat;
    background-position: 0 4px;
    background-size: 20px;
}

.me .upgrade_box {
    padding-top: 15px;
    padding-bottom: 5px;
}

.me .upgrade_box .upgrade {
    min-width: 160px;
    padding: 0 30px;
    height: 38px;
    line-height: 38px;
    color: #fff;
    background-color: #ffcc00;
    border-radius: 5px;
    font-size: 15px;
    font-weight: bold;
    box-shadow: 1px 2px 6px #ffefad;
}

.me .body {
    position: relative;
    z-index: 1;
    padding-bottom: 20px;
}

.me .line_icon_box {}

.me .line_icon_box .icon_verifyProfile {
    width: 22px;
    height: 22px;
    display: inline-block;
    background: url(../assets/verifiedbg.png) 2px -28px no-repeat;
    background-size: 16px auto;
}

.me .line_icon_box .icon_gold {
    width: 22px;
    height: 22px;
    background-size: 22px auto;
}

.me .photoArea:last-child {
    border-bottom: 10px solid #f6f7f9;
}

.me .aboutArea,
.me .detailArea {
    overflow: hidden;
}

.me .aboutArea:nth-of-type(4) {
    border-top: 10px solid #f2f2f2;
}

.me .upgradeBtn {
    width: 150px;
    padding: 7px 0 8px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    background-color: #f5ae52;
    margin: 20px auto auto auto;
    border-radius: 5px;
}

.me .upgradeBtn span {
    background: url(../assets/ico_gold.png) center no-repeat;
    background-size: auto 20px;
    padding: 2px 0 2px 22px;
    margin-right: 5px;
}

.me .aboutArea .aboutTitle,
.me .detailArea .detailTitle {
    margin-top: 20px;
    font-size: 18px;
    position: relative;
    color: #1e1e1e;
}

.me .detailArea .detailTitle .profileEdit {
    position: absolute;
    right: 0;
    top: 0;
    width: 42px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: 20px center;
    background-size: auto 14px;
}

.me .detailArea .infoBox {
    margin-top: 20px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: left 2px;
    background-size: 21px auto;
    padding: 0 0 0 34px;
    font-size: 15px;
    color: #333333;
    min-height: 23px;
}

.me .photoArea {
    border-top: 10px solid #f2f2f2;
    overflow: hidden;
}

.me .photoArea .notice {
    margin: 0 10px;
    height: 33px;
    position: relative;
    text-align: left;
    line-height: 33px;
    color: #333333;
    font-size: 14px;
}

.me .photoArea .notice .arrow {
    position: absolute;
    right: 6px;
    top: 10px;
}

.me .photoArea .notice .nums {
    position: absolute;
    height: 16px;
    line-height: 16px;
    color: #fff;
    background-color: #f92c49;
    border-radius: 8px;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: 11px;
    padding: 0 6px;
    font-size: 12px;
}

.me .photoArea .notice .arrow:before {
    border: 7px solid transparent;
    border-left: 6px solid #fff;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: -13px;
    content: '';
    right: -14px;
    border-left-color: #c7c7cc;
}

.me .photoArea .notice .arrow:after {
    border: 7px solid transparent;
    border-left: 6px solid #fff;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: -13px;
    content: '';
}

.me .photoArea dl {
    overflow: hidden;
}

.me .photoArea .noPhotoMsg {
    float: left;
    width: 75%;
    height: 0;
    overflow: hidden;
    text-align: center;
    padding: 0 0 25% 0;
    position: relative;
}

.me .photoArea .noPhotoMsg div {
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    font-size: 12px;
    padding: 0 10px 0 0;
    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;
    /* Safari、Opera 以及 Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
    text-align: left;
    opacity: .8;
}

.me .photoArea .noPhotoMsg div strong {
    font-size: 15px;
}

.me .photoArea .photoMsg {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    text-align: right;
}

.me .photoArea .photoMsg div {
    position: absolute;
    right: 18px;
    top: 50%;
    color: #fff;
    font-size: 14px;
    line-height: 18px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}

.me .photoArea .photoMsg div strong {
    font-size: 18px;
    padding-bottom: 3px;
    display: inline-block;
}

.me .photoArea dd {
    float: left;
    width: 25%;
    height: 0;
    padding-bottom: 25%;
    overflow: hidden;
    background: url(../assets/max_loading.gif) center no-repeat;
    background-size: 30px 30px;
    position: relative;
}

.me .photoArea dd.totalInfo {
    background: none;
    float: right;
}

.me .photoArea dd.totalInfo div {
    font-size: 14px;
    line-height: 18px;
    box-sizing: border-box;
    text-align: right;
    padding: 0 8px 0 0;
    color: #333333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.me .photoArea dd .img {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.me .photoArea dt {
    float: left;
    width: 25%;
    height: 0;
    padding-bottom: 25%;
    overflow: hidden;
    position: relative;
}

.me .photoArea dt:before {
    content: '';
    width: 26px;
    height: 2px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -1px 0 0 -13px;
    border-top-style: solid;
    border-top-width: 2px;
    border-top-color: inherit;
    opacity: .7;
}

.me .photoArea dt:after {
    content: '';
    width: 2px;
    height: 26px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -13px 0 0 -1px;
    border-left-style: solid;
    border-left-width: 2px;
    border-left-color: inherit;
    opacity: .7;
}

.me .detailArea,
.me .aboutContent {
    padding: 0 18px;
}

.me .aboutContent li {
    padding: 20px 0 20px 0;
    border-bottom: 1px solid #e7e7e7;
}

.me .aboutContent .title {
    height: 26px;
    position: relative;
    padding: 0 50px 10px 0;
    color: #111;
    font-size: 15px;
    line-height: 26px;
    font-size: 17px;
}

.me .aboutContent .dec {
    font-size: 15px;
    color: #4e4e4e;
}

.me .aboutContent .profileEdit {
    position: absolute;
    right: 0;
    top: 0;
    width: 38px;
    height: 26px;
    background-repeat: no-repeat;
    background-position: 18px center;
    background-size: auto 14px;
}

.me .body .login {
    width: 80px;
    padding: 0 20px;
}

.me .moduleHead .icon_setting {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 42px;
    display: inline-block;
    background: url(../assets/icon_setting.png) center no-repeat;
    background-size: auto 20px;
}

.me .me_head {
    position: relative;
    text-align: center;
    font-size: 14px;
    color: #999;
    padding-bottom: 24px;
    padding-top: 26px;
}

.me .me_head .name {
    color: #333333;
    font-size: 20px;
    margin-top: 2px;
}

.me .me_head .name span {
    display: inline-block;
    vertical-align: middle;
}

.me .me_head .city {
    padding-left: 24px;
    font-size: 14px;
    color: #333333;
}

.me .me_head .profileEdit {
    margin: 0 0 0 10px;
    padding: 2px 0 2px 14px;
    background-repeat: no-repeat;
    background-position: 0 2px;
    background-size: auto 14px;
}



.me .me_head .portrait {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #fbfbfb;
    margin: auto;
    position: relative;
    margin-bottom: 14px;
}

.me .me_head .portrait label {
    width: 84px;
    height: 84px;
    display: inline-block;
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
    border-radius: 50%;
    overflow: hidden;
}

.me .me_head .portrait .mainImg {
    background-size: 84px 84px;
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

.me .me_head .portrait label .img {
    width: 84px;
    height: 84px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    border-radius: 42px;
    overflow: hidden;
}

.me .me_head .portrait .ico_gold {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 2px;
}

.me .detailArea .infoBox:last-child {
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 20px;
}

.me .aboutArea:last-child li:last-child {
    border: 0;
}

.me .aboutArea .certification {
    position: relative;
}

.me .aboutArea .icon_verifyProfile {
    position: absolute;
    top: 20px;
    right: 4px;
    width: 22px;
    height: 22px;
    background: url(../assets/verifiedbg.png) 2px 2px no-repeat;
    background-size: 17px auto;
}

</style>
